<template>
  <div>
    <!-- 数据表格 -->
    <div :class="minHeight==true?'minheight':''" ref="tableCardHeight">
      <Card class="tableCard">
        <Table :columns="qualityColumns" :data="qualityData" size="small" @on-filter-change="onfilterChange" :row-class-name="rowClassName" className="aaa"> 
          <template slot-scope="{row}" slot="plantype">
            <span>{{row.plantype && (row.plantype == '0')?'督导件':(row.plantype == '1')?'收费件':(row.plantype == '2')?'失效件':(row.plantype == '3')?'交办件':(row.plantype == '4')?'关爱件':'-'}}</span>
          </template>
          <template slot-scope="{row}" slot="score" >
            <span style="color:#2d8cf0">{{row.score}}</span>
          </template>
          <template slot-scope="{row}" slot="agentcode" class="aaa">
            <span>{{row.agentcode}} - {{row.agentcodename}}</span>
          </template>
          <template slot-scope="{row}" slot="isWork">
            <span>{{row.isWork == "Y" ? '有' : '无'}}</span>
          </template>
          <template slot-scope="{row}" slot="workrecord">
            <span><Button
              type="primary"
              @click="checkWorkRecord(row)"
              style="border-radius: 16px;background-color:rgb(24,144,255);color:#fff"
            >查询</Button></span>
          </template>

        </Table>
        <!-- 分页 -->
        <Row>
          <i-col span="24" style="text-align:right;margin-top:20px;margin-bottom:40px;">
            <Page
              :total="total"
              show-total
              show-sizer
              :current="pageIndex"
              :page-size="pageSize"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              :page-size-opts="pageSizeOptions"
            />
          </i-col>
        </Row>
      </Card>
    </div>
    <Button type="primary" @click="info" v-if="false"></Button>
    <div class="contain" ref="mybox" v-show="false">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import {drawSign} from '../../../util/drawSign';
export default {
  name:"workRecordCheckingList",
  data() {
    return {
      relaType:'',
      isWork:'',
      // 表格数据
      qualityColumns: [
        // {
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 60
        // },
        {
          title: "分单类型",
          key: "plantype",
          width: "100",
          fixed: "left",
          slot: "plantype",
          // render: (h, params) => {
          //   return h('span',
          //     params.row.plantype && (params.row.plantype == '0')?'督导件':(params.row.plantype == '1')?'收费件':(params.row.plantype == '2')?'失效件':(params.row.plantype == '3')?'交办件':(params.row.plantype == '4')?'关爱件':'-'
          //   );
          // }
          filters: [
            {
              label: '督导件',
              value: '0'
            },
            {
              label: '收费件',
              value: '1'
            },
            {
              label: '失效件',
              value: '2'
            },
            {
              label: '交办件',
              value: '3'
            },
            {
              label: '关爱件',
              value: '4'
            },
          ],
          filterMultiple:false,
          filterRemote :(value, row) => {
            console.log(value[0],"ww")
            this.relaType = value[0]
            // 
            if (value === "0") {
              return row.plantype === "0";
            } else if(value === "1") {
              return row.plantype === "1";
            } else if(value === "2") {
              return row.plantype === "2";
            } else if(value === "3") {
              return row.plantype === "3";
            } else if(value === "4") {
              return row.plantype === "4";
            }
            this.submitForm()
          }
        },
        {
          title: "保单号",
          key: "contno",
          width: "180",
          fixed: "left"
        },
        {
          title: "投保人",
          key: "appentName",
          align: "center",
          width: "130"
        },
        {
          title: "保单生效日",
          key: "cvalidate",
          align: "center",
          width: "130",
          render: (h, params) => {
            return h('span',
              //  params.row.plantype == '4' ?
               params.row.cvalidate.slice(0,10)
              //  :'-'
            );
          }
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "130",
          // sortable: true,
          // sortable: "custom"
          render: (h, params) => {
            return h('span',
              //  params.row.plantype != '4' ?
                params.row.paytodate.slice(0,10)
                // :'-'
            );
          }
        },
        {
          title: "交次",
          key: "payyear",
          align: "center",
          width: "110"
        },
        {
          title: "交费难度",
          key: "difficulty",
          align: "center",
          width: "120",
          render: (h, params) => {
            return h('span',
              params.row.plantype && (params.row.plantype == '4')?'-':params.row.difficulty
            );
          }
        },
        {
          title: "保费(元)",
          key: "paymoney",
          align: "center",
          width: "140",
          // sortable: true,
          // sortable: "custom"
        },
        {
          title: "宽限期剩余天数",
          key: "restdays",
          align: "center",
          width: "150",
          render: (h, params) => {
            return h('span',
              params.row.plantype && (params.row.plantype == '4')?'-':params.row.restdays
            );
          }
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "160"
        },
        {
          title: "计划工作方式",
          key: "worktypename",
          align: "center",
          width: "140"
        },
        {
          title: "实际工作时间",
          key: "doworkdate",
          align: "center",
          width: "160"
        },
        {
          title: "有无工作录入",
          key: "isWork",
          align: "center",
          minWidth: 140,
          slot: "isWork",
          filters: [
            {
              label: '有',
              value: 'Y'
            },
            {
              label: '无',
              value: 'N'
            },
          ],
          filterMultiple:false,
          filterRemote :(value, row) =>{
            console.log(value,"isWork")
            this.isWork = value[0]
            if (value === "Y") {
              return row.isWork === "Y";
            } else if(value === "N") {
              return row.isWork === "N";
            }
            this.submitForm()
          }
        },

        {
          title: "业务员",
          key: "agentcode",
          align: "center",
          width: "170",
          slot: 'agentcode',
          fixed: "right"
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "110",
          // slot: "planstatename",
          fixed: "right"
        },
        {
          title: "工作记录",
          key: "workrecord",
          align: "center",
          width: "110",
          slot: "workrecord",
          fixed: "right"
        }
      ],
      qualityData: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      // 调整card高度
      minHeight: false,
      dateOptions: {
        disabledDate(date) {
          return (
            date &&
            (date.valueOf() > Date.now() ||
              date.valueOf() < Date.parse("2019-04"))
          );
        }
      },
      queryState: false,
      queryLoading: false
    };
  },
  methods: {
        //行样式
    rowClassName (row, index) {
      if (row.planstatename == '未服务') {
        return 'aaa';
      }
      return ''
    },
    info(tip) {
      this.$Message.info(tip);
    },
    //跳转
    checkWorkRecord(row){
        // let obj = {
        //     planid:row.planid,
        //     contno:row.contno
        // }
        // console.log()
      // sessionStorage.removeItem('flag');
      if(row.plantype == '4'){
        this.$router.push({
          name: "workRecordCheckCare",
          query: {
            planid:row.planid,
            contno:row.contno,
            row:this.$route.query.row,
            type:this.$route.query.type
          }
        });
        return
      }
       this.$router.push({
         name: "workRecordChecking",
         query: {
           planid:row.planid,
           contno:row.contno,
           row:this.$route.query.row,
           type:this.$route.query.type
         }
       });
    },
    // 查询
    submitForm() {
    //   this.$refs.qualityForm.validate(valid => {
    //     if (valid) {
        //   this.queryLoading = true;
          let obj = {
            reagentcode: this.$route.query.reagentCode,
            index:this.pageIndex,
            pageSize:this.pageSize,
            workkind: this.$route.query.type,
            appointeddate: this.$route.query.appointeddate,
            relaType: this.relaType ||'',
            isWork : this.isWork || '',
          };
          //console.log(obj)
          this.total = 0;
          this.qualityData = [];
          this.api.selectWorkStatisticsWorkType(obj).then(res => {
            //console.log(res.data)
            if (res.code == 200 && res.data != null) {
              this.qualityData = res.data.records
              this.total = res.data.total;
              this.queryState = true;
              this.queryLoading = false;
              //console.log(this.qualityData);
              this.$Message.info(res.msg);
            } else {
              this.total = 0;
              this.qualityData = [];
              this.queryLoading = false;
              this.$Message.info(res.msg);
            }
          });
    //     }
    //   });
    },
    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.submitForm();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.submitForm();
    },
    // 合并行
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0 && (columnIndex === 0 || columnIndex === 1)) {
        return {
          rowspan: 2,
          colspan: 1
        };
      }
      if (rowIndex % 2 === 1 && (columnIndex === 0 || columnIndex === 1)) {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    adjustHeight() {
      if (this.$refs.tableCardHeight.scrollHeight < 460) {
        this.minHeight = true;
      }
    },
    onfilterChange(row){
      console.log(row,"111111")
    }
    // draw(ele,loginUser,loginTime) {
    //   let imageUrl = drawSign(ele,loginUser,loginTime)
    //   document.getElementsByClassName("ivu-table-fixed-body")[0].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-fixed-body")[0].classList.add("add-background")
    //   document.getElementsByClassName("ivu-table-fixed-body")[1].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-fixed-body")[1].classList.add("add-background")
    //   document.getElementsByClassName("ivu-table-body")[0].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-body")[0].classList.add("add-background")
    // },
  },
  mounted() {
    this.adjustHeight();
    // console.log(this.$route.query.flag,"1111");
    
      // this.submitForm();

  },
  activated(){
    console.log(window.sessionStorage.getItem("flag"),"flag")
    if(window.sessionStorage.getItem("flag")){
      this.pageIndex = 1
       this.submitForm();
    console.log("进来");
    }else{
    console.log("没来");
  }
  }
};
</script>
<style lang="less" scoped>
@import "./index";
.ivu-icon-ios-close:before {
  color: #000 !important;
}
.add-background td{
background-color: rgba(255,255,255,0) !important;
background: rgba(255,255,255,0) !important;
}
</style>
